<style type="text/css">
    .action-cell {
        margin-bottom: 20px;
    }

    .search-block {
        display: flex;
        margin-bottom: 10px;
    }

    .input-search {
        margin-right: 10px;
    }
</style>
<template>
    <div>
        <h4>值班编队管理</h4>
        <Alert show-icon>
            此处用于值班编队人员的管理。
        </Alert>
        <ButtonGroup>
            <Button type="success" @click="addModal=true">
                <Icon type="md-add-circle"/>
                添加
            </Button>
            <Button type="warning" :disabled="deleteBtnEnable" @click="remove">
                <Icon type="md-close-circle"/>
                删除
            </Button>
        </ButtonGroup>
        <Row>
            <Col>
                <Table :context="self" :data="tableData" :columns="tableColumns" stripe border
                       @on-select="tableItemChecked" @on-select-cancel="tableItemChecked"
                       @on-select-all="tableItemChecked"
                       @on-select-all-cancel="tableItemChecked"
                       style="margin-top:15px;">
                </Table>
            </Col>
        </Row>
        <!--添加-->
        <Modal v-model="addModal" title="添加" @on-ok="handleSubmitAdd('formValidate')"
               @on-cancel="addModal =false">
            <Form ref="formValidate" :model="formValidate" :label-width="100">
                <Form-item label="选择人员" prop="Title">
                    <Col span="12">
                        <selectSearch :selectBaseInfo="selectBaseInfo"
                                      @post-data="getCompentensData"></selectSearch>
                    </Col>
                </Form-item>
                <Form-item label="职务" prop="Duty">
                    <i-select v-model="formValidate.teamDuty" placeholder="请选择职务" style="width:200px">
                        <template v-for="(item,index) in dutyArr">
                            <i-option :value="item.Configvalue">{{item.Configvalue}}</i-option>
                        </template>
                    </i-select>
                </Form-item>
                <Form-item label="编队排序" prop="sortIndex">
                    <i-input v-model="formValidate.sortIndex" placeholder="请输入编队排序"></i-input>
                </Form-item>
            </Form>
        </Modal>
    </div>
</template>
<script>
    import apiUtil from '../../assets/utils/api_util';
    import selectSearch from '../../components/selectSearch';

    export default {
        data() {
            return {
                self: this,
                tableData: [],
                total: 0,
                current: 1,
                //记录组件传来的值
                reqpeopleDept: '',
                //选择人员
                selectBaseInfo: {
                    "title": '',
                    "placeholder": '请输入姓名',
                    "postUrl": apiUtil.urls.userList,
                    'postType': 'user',
                },
                //职务列表
                dutyArr: [],
                //添加
                formValidate: {
                    //添加字段
                    sortIndex:'',
                    teamDuty:'',
                },
                addModal: false,
                //操作按钮状态管理
                deleteBtnEnable: true,
                selectedItems: [],
                tableColumns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '人员名称',
                        key: 'Displayname',
                        align: 'center',
                    },
                    {
                        title: '联系电话',
                        key: 'Phone',
                        align: 'center',
                    },
                    {
                        title: '性别',
                        key: 'Sex',
                        align: 'center',
                    },
                    {
                        title: '职务',
                        key: 'Duty',
                        align: 'center',
                    },

                ]
            }
        },
        mounted() {
            this.mockTableData();
            this.getDutyData();
        },
        components: {
            selectSearch
        },
        methods: {
            //跳转
            jumpPage: function (id, url) {
                //跳转
                let route = '';
                if (id > 0) {
                    route = {
                        path: url,
                        query: {
                            id: id
                        },
                    };
                } else {
                    route = {
                        path: url,
                    };
                }

                this.$router.push(route);
            },
            mockTableData() {
                let that = this;

                let para = {};
                let params = that.$qs.stringify(para);

                this.$Loading.start();

                apiUtil.get(that, apiUtil.urls.ListTeamMember, para, function (res) {
                    that.$Loading.finish();
                    // that.total = res.Msg.TotalCount;
                    // that.current = res.Msg.CurrentPage;
                    that.tableData = res.Msg;

                    console.log('tableData:', res)
                });

            },
            //获取职务
            getDutyData: function () {
                let that = this;

                let para = {};
                let params = that.$qs.stringify(para);


                apiUtil.get(that, apiUtil.urls.DutyList, params, function (res) {
                    that.$Loading.finish();
                    that.dutyArr = res.Msg;
                    console.log('res:', res)
                });
            },
            //获取选择搜索组件传来结果数据
            getCompentensData: function (value) {
                this.reqpeopleDept = value;
            },
            // 表格内选中及取消选中操作
            tableItemChecked: function (selection, row) {

                this.selectedItems = selection;

                console.log('选择删除项:', selection);

                if (this.selectedItems.length > 1) {
                    // 此处添加不要多选的提示
                    this.$Message.warning('此处不允许批量删除 ');
                    this.deleteBtnEnable = true;

                } else {
                    this.deleteBtnEnable = false;
                }
            },
            //删除
            remove: function () {
                let self = this;
                let that = this;
                this.$Modal.confirm({
                    title: '操作警告',
                    content: '即将删除选中的区域项，该操作不可逆转，请确认您的操作。',
                    onOk: function () {
                        this.$Loading.start();
                        var selectedItemIds = "";
                        var selectedItemAccountId ="";
                        for (var i = 0; i < that.selectedItems.length; i++) {
                            selectedItemIds += that.selectedItems[i].Id.toString() + ",";
                            selectedItemAccountId += that.selectedItems[i].Accountid.toString() + ",";
                        }
                        selectedItemIds = selectedItemIds.substring(0, selectedItemIds.length - 1);
                        selectedItemAccountId = selectedItemAccountId.substring(0, selectedItemAccountId.length - 1);

                        let para = {
                            memberId: selectedItemIds,
                            accountId: selectedItemAccountId,
                    };
                        let params = that.$qs.stringify(para);

                        apiUtil.post(that, apiUtil.urls.RemoveTeamMember, params, function (res) {
                            that.$Message.success('删除成功。');
                            that.mockTableData();
                        });
                    }
                });
            },
            //添加
            handleSubmitAdd(name) {
                let that = this;
                let model = this.$refs[name].model;
                this.$refs[name].validate((valid) => {
                    that.addData(model);
                });
            },
            addData: function (model) {
                let that = this;

                model.accountId = this.reqpeopleDept.resultId;
                let params = that.$qs.stringify(model);
                this.$Loading.start();

                console.log(params);

                apiUtil.post(that, apiUtil.urls.AddPeopleToTeam, params, function (res) {
                    that.$Loading.finish();
                    that.addModal = false;
                    that.mockTableData();
                    that.$Message.info('添加成功 ');
                    that.handleReset('formValidate');

                });
            },
            //重置表单
            handleReset(name) {
                this.$refs[name].resetFields();
            },
            changePage(row) {
                // 这里直接更改了模拟的数据，真实使用场景应该从服务端获取数据
                console.log("row", row);
                this.current = row;
                this.mockTableData();
            }
        },
    }
</script>
